<template>
	<div class="app-container">
		<div class="section-one">
			<div class="header">


				<!-- 		<img class="img" src="../../static/image/moren.png" /> 
		<button class="btn" @click="handleLogin">点击登录</button>  
		 -->
				<img v-if="!isLoggedIn" class="img" src="../../static/image/moren.png" />
				<img v-else class="img" src="../../static/navi/success.png" />
				<button v-if="!isLoggedIn" class="btn" @click="handleLogin">点击登录</button>
				<button v-else class="btn" @click="logout">退出登录</button>
				
			</div>
			<div class="main-content">
				<span>欢迎来到袁隆平杂交水稻科学园</span>
			</div>
		</div>

		<div class="section-two">
			<div class="left-aligned-button">
				<button class="btn" @click="showRecords">预约记录</button>
			</div>
			<img class="icon" src="../../static/image/img.png" />
			<view class="no-records">
				<text>暂无预约记录</text>
			</view>
		</div>
		<div class="footer">
			<span>技术支持：攀枝花学院</span>
		</div>
	</div>
</template>
<script>
export default {
  data() {
    return {
      isLoggedIn: false // 初始状态为未登录
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑...
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000
      });
      this.isLoggedIn = true; // 更新登录状态
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }, 2000);
    },
    logout() {
      // 登出逻辑...
      this.isLoggedIn = false; // 更新登录状态
      uni.showToast({
        title: '已退出登录',
        icon: 'none',
        duration: 2000
      });
    },
    showRecords() {
      // 显示预约记录的逻辑...
    }
  }
}
</script>


<style>
	.app-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 95vh;
		/* 根据需要调整高度 */
		padding: 20px;
		/* 添加一些内边距以避免内容紧贴边缘 */
		box-sizing: border-box;
		/* 确保内边距不会增加总宽度 */
		background-color: #f0f0f0;
	}

	.btn {
		/* 移除所有背景色和边框 */
		background-color: transparent;
		/* 确保背景是透明的 */
		border-color: white;
		/* 移除边框 */
		/* 添加一些内边距和外边距以改善可读性 */
		padding: 10px 20px;
		margin: 5px 0;
		/* 设置文字样式 */
		color: black;
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		/* 如果需要的话，确保文本居中 */
		cursor: pointer;
		/* 鼠标悬停时显示手指指针，表明可点击 */
	}

	.button:hover {
		color: darkgray;
		/* 悬停时文本颜色变深灰 */
		/* 如果需要，可以在这里添加其他悬停效果，比如背景色变化 */
	}

	.left-aligned-button {
		position: absolute;
		/* 绝对定位，使其脱离文档流 */
		top: -8px;
		/* 顶部偏移，根据需要调整 */
		left: 0px;
		/* 左侧偏移，根据需要调整 */
	}

	.img {
		width: 50px;
		height: 50px;
		margin-top: -30rpx;
		margin-right: 5px;
		text-align: center;
	}

	.icon {
		margin-top: 180rpx;
		width: 141px;
		height: 130px;
		margin-left: 95px;

	}

	.no-records {
		width: 100%;
		/* 可选，但有助于确保文本宽度 */
		text-align: center;
		margin-bottom: 90px;
		/* 文本居中 */
	}

	.footer {
		position: fixed;
		/* 固定在页面上 */
		bottom: 80rpx;
		/* 紧贴页面底部 */
		width: 100%;
		/* 宽度占满整个屏幕 */
		text-align: center;
		/* 文字居中显示 */
		background-color: transparent;
		/* 背景色，可选 */
		padding: 10px 0;
		/* 上下内边距 */
	}


	.header,
	.main-content {
		/* 可以在这里添加具体的样式 */
		margin-top: 10px;
		width: 100%;
		/* 确保内容宽度 */
		text-align: center;
		/* 如果需要，可以将主内容居中 */
	}

	.section-one {
		/* 为两个区域添加一些间距和样式 */
		margin-top: 90rpx;
		margin-bottom: 20px;
		/* 或者根据需要调整 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 底部阴影效果 */
		padding: 20px;
		/* 内部填充 */
		border-radius: 8px;
		/* 边框圆角 */
		background-color: white;
		width: 95%;
		/* 其他区域样式 */
	}

	.section-two {
		/* 为两个区域添加一些间距和样式 */
		position: relative;
		margin-bottom: 80px;
		/* 或者根据需要调整 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 底部阴影效果 */
		padding: 20px;
		/* 内部填充 */
		border-radius: 8px;
		/* 边框圆角 */
		background-color: white;
		/* 其他区域样式 */
		width: 95%;
	}
</style>